<template>
  <div>
    <!-- 轮播图部分 -->
    <div class="carousel">
      <el-carousel height="540px" :interval="3000">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img :src="item.lb_img" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="title">推荐商品</div>
    <div class="list">
      <div class="items" v-for="item in lists" :key="item.id">
        <img :src="item.image" alt="" />
        <div class="item-data">
          <div class="head">
            <p class="title">{{ item.sellPoint }}</p>
            <p class="hint">{{ item.descs }}</p>
            <span
              >价格：¥<i>{{ item.price }}</i></span
            >
            <p>
              数量: <i>{{ item.num }}</i> 个
            </p>
            <p>
              活动日期: <i>{{ item.date | dateFormat }}</i>
            </p>
          </div>
          <el-button type="danger" @click="goDetail(item.id)">购买</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FirstProjectMain',

  data() {
    return {
      list: [],
      lists: []
    }
  },

  mounted() {},

  methods: {
    async getCarouselList() {
      const { data: res } = await this.$http.get('/carousel')
      this.list = res.data
    },
    async getProductData() {
      const { data: res } = await this.$http.get('/limit/getProductData')
      this.lists = res.data
      console.log(res.data)
    },
    formatDateTime(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        const date = new Date(value)
        const y = date.getFullYear() // 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate() // 日
        d = d < 10 ? '0' + d : d
        let h = date.getHours() // 时
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes() // 分
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds() // 秒
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    },
    goDetail(id) {
      this.$router.push({
        path: `detail/${id}`
      })
      console.log(id)
    }
  },
  created() {
    this.getCarouselList()
    this.getProductData()
  }
}
</script>

<style lang="scss" scoped>
.carousel {
  img {
    width: 100%;
    height: 540px;
  }
  ::v-deep .is-active {
    padding: 0 !important;
  }
}
.title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
}
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .items {
    width: 600px;
    height: 250px;
    margin: 20px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border: 1px solid #000;
    img {
      width: 350px;
    }
    .item-data {
      background-color: #fff;
      width: 350px;
      height: 250px;
      .head {
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 20px;
        p {
          margin: 0;
        }
      }
    }
  }
  i {
    font-style: normal;
    font-weight: 700;
  }
}
</style>
